<style lang="less" scoped>
  .sidebar__menu {
    height: 100%;

    .system__logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
    }

    .menu__home {
      vertical-align: middle;
      margin-right: 5px;
      text-align: center;
      font-size: 18px;
    }

    &:not(.el-menu--collapse) {
      width: 200px;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
</style>

<template>
  <el-menu ref="menu" class="sidebar__menu" @open="handleOpen" @close="handleClose" :collapse="isCollapse" @select="handleMenuSelect" unique-opened>
    <div class="system__logo">
      <img src="../../../assets/logo_16-16.png" v-if="isCollapse" width="20" height="20" alt="">
      <img src="../../../assets/logo_60-60.png" v-else height="80%" alt="">
    </div>
    <el-menu-item v-if="$store.state.app.isShowDashboard" key="home" index="/web/dashboard/customview.html">
      <i class="iconfont icon-dashboard menu__home"></i>
      <span slot="title" style="font-size: 14px;">{{$t('home')}}</span>
    </el-menu-item>
    <el-submenu v-for="firstLevel in menuList" :key="firstLevel.menuid" :index="firstLevel.menuurl" :default-active="activeMenuName">
      <template slot="title">
        <i :class="`iconfont ${firstLevel.icon}`"></i>
        <span slot="title" style="font-size: 14px;">{{firstLevel.menuname}}</span>
      </template>

      <template v-for="secondLevel in firstLevel.children">
        <el-submenu v-if="handleJudgeHasChildMenu(secondLevel)" :key="secondLevel.menuid" :index="secondLevel.menuurl">
          <span slot="title">{{secondLevel.menuname}}</span>
          <template v-for="lastLevel in secondLevel.children">
            <el-menu-item :key="lastLevel.menuid" :index="lastLevel.menuurl">
              <span slot="title">{{lastLevel.menuname}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :key="secondLevel.menuid" :index="secondLevel.menuurl">
          <span slot="title">{{secondLevel.menuname}}</span>
        </el-menu-item>
      </template>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name: 'sidebar',
  data () {
    return {
      activeMenuName: 'home'
    }
  },
  props: {
    isCollapse: { type: Boolean, default: false }
  },

  computed: {
    menuList () {
      let currentMenu = this.$store.state.app.sysMenu
      currentMenu = currentMenu.filter(item => {
        return item.menuname.substr(0, 4) !== 'home'
      })
      return currentMenu
    }
  },
  methods: {
    handleOpen () { },
    handleClose () { },

    handleJudgeHasChildMenu (menu) {
      if (menu.children && menu.children.length > 0) {
        let result = menu.children.find(item => item.type === 'button')
        if (result) return false
        else return true
      } else {
        return false
      }
    },

    handleMenuSelect (routeName, routePath) {
      this.$router.push(routeName)
    }
  }
}
</script>
